<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no">
<title>start</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" >
<link href="css/zzsc.css" rel="stylesheet">
<link href="css/yehuan_scrollbar_hidden.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<style>

	
	body{font-family:微软雅黑;}
	.left{ width:100%; height:100%; ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
	.div1{
		text-align:center; width:100%;}
	.div2{height:40px; line-height:40px; font-size:13px; background:#eee; border-radius:3px;margin-bottom:2px}
	.div3{display: none;cursor:pointer; font-size:13px;}
	.div3 ul{margin:0;padding:0;}
	.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
	.div3 li:visited{ background:#9C3}
	img{ width:100%; height:auto}
	a{color:#000}
	a:link {text-decoration: none; }
	a:visited { text-decoration: none; }
	a:hover { text-decoration: none; }
	a:active { text-decoration: none;}
	.linked_style{color:yellow;}
	.item{
		position:relative
	}
	#catalogue{
		overflow-y:scroll;
		padding-left:0px;
		padding-right:5px;
	}	
	#content{
		overflow-y:scroll;
		padding:0px;		
	}
	.product_show{
		margin-bottom:10px;
		border:1px solid #999;
		border-radius:3px;
		
	}
	.outest{
		
		padding: 5px 20px;
		
	}
	.foot{
		width:100%;
		height:40px;
		z-index:500;
		position:fixed;
		bottom:0px;
		background:yellow;
		line-height:40px;
		
	}

	.plus{
		background:#000;
		opacity:0.5;
		position:absolute;
		z-index:400;
		top:0px;
		right:0px;				
	}
	.sub{

		background:#000;
		opacity:0.5;
		position:absolute;
		z-index:400;
		bottom:0px;
		right:0px;
				
	}
	.cart{
		margin-left:10px;
		float:left;
	}
	
</style>


</head>
<body >
	
	<div class="outest">
	<div  class="row" >
		<div  id="catalogue" class="col-xs-4 col-sm-4 col-lg-4" >
       			<div class="left">
            		<div class="div1">
                        <div class="div2">基本管理</div>
                        <div class="div3">
                             	<ul>
                                  	<li> <a href="#">网站配置</a></li>
                                   	<li> <a href="#">管理设置</a></li>
                                   	<li> <a href="#">导航菜单</a></li>
                               	</ul>	
                        </div>  
                		<div class="div2">基本管理</div>
                        <div class="div3">
                             	<ul>
                                  	<li> <a href="#">网站配置</a></li>
                                   	<li> <a href="#">管理设置</a></li>
                                   	<li> <a href="#">导航菜单</a></li>
                               	</ul>	
                        </div>
                         <div class="div2">基本管理</div>
                        <div class="div3">
                             	<ul>
                                  	<li> <a href="#">网站配置</a></li>
                                   	<li> <a href="#">管理设置</a></li>
                                   	<li> <a href="#">导航菜单</a></li>
                               	</ul>	
                        </div>  
                		<div class="div2">基本管理</div>
                        <div class="div3">
                             	<ul>
                                  	<li> <a href="#">网站配置</a></li>
                                   	<li> <a href="#">管理设置</a></li>
                                   	<li> <a href="#">导航菜单</a></li>
                               	</ul>	
                        </div>
                         <div class="div2">基本管理</div>
                        <div class="div3">
                             	<ul>
                                  	<li> <a href="#">网站配置</a></li>
                                   	<li> <a href="#">管理设置</a></li>
                                   	<li> <a href="#">导航菜单</a></li>
                               	</ul>	
                        </div>  
                		
                	</div>
               </div>
        </div>        
    	
        <div  id="content" class="col-xs-8 col-sm-8 col-lg-8">
            <div  class="product_show">
            	<div class="item">
            		<img src="images/2.png" data-toggle="modal" data-target="#mymodal">
                	<div class="plus"></div>
                	<div class="sub"></div>
                </div>
               	<p>abc</p> 
            </div>
          	 <div class="product_show">
            	<div class="item">
            		<img src="images/2.png">
                	<span class="plus"></span>
                	<span class="sub"></span>
                </div>
                	<p>abc</p> 
            </div>
             <div class="product_show">
            	<div class="item">
            		<img src="images/2.png">
                	<span class="plus"></span>
                	<span class="sub"></span>
                </div>
               	<p>abc</p> 
            </div>
          	 <div class="product_show">
            	<div class="item">
            		<img src="images/2.png">
                	<span class="plus"></span>
                	<span class="sub"></span>
                </div>
                	<p>abc</p> 
            </div>
        </div>
    </div>
    </div> <!-- outest -->
    
    
    <div class="foot">
		<div class="cart"><img src="images/cart.png"></div>
	</div>

<!-- 模态框 -->
<div class="modal fade" id="mymodal" >
  <div class="modal-dialog" style="margin-top:auto;margin-left:0px;margin-right:0px;margin-bottom:0px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>	
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="bootstrap331/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		
		resize();
		$(".div2").click(function(){ 
			$(this).next(".div3").slideToggle(500).siblings(".div3:visible").slideUp(500);
		});
		$("a").click(function(){
			$("a").removeClass(" linked_style");
			$(this).addClass(" linked_style");
		});
		$(window).resize(function(e) {
            resize();
        });
	});
	function resize(){
		$(".plus").height($("img").height()/2-1);
		$(".plus").width($("img").width()/4);
		$(".sub").height($("img").height()/2-1);
		$(".sub").width($("img").width()/4);
		$("#catalogue").height($(window).height()-40);
		$("#content").height($(window).height()-40);
	}
</script>
</body>
</html>
